/*
 * @Title: 收藏夹
 * @Created by: ycq
 */
<template>
	<view class="Collection" >
		<view class="mask" @click="close()"  @touchmove.stop.prevent></view>
		<NewCollection v-if='openNewColl'></NewCollection>
		<view class="Collection-box" v-else>
			<view class="Collection-head">
				<text class="Collection-label">选择收藏夹</text>
				<text class="new" @click="newColl()">新建</text>
			</view>
			<view class="Collection-list">
				<view class="Collection-item" @click="chooseColl(item.id)" v-for="(item,index) in collData" :key='index'>
					<image class="item-img" :src="item.img" mode=""></image>
					<view class="item-info">
						<text class="coll-name">{{item.name}}</text>
						<text class="coll-num">{{item.num}}条收藏</text>
					</view>
					<image v-if="collIndex!=item.id" class="item-choose" src="/static/shop/unchoose.png" mode=""></image>
					<image v-if="collIndex==item.id" class="item-choose" src="/static/shop/choose.png" mode=""></image>
				</view>
			</view>
			<view class="commit" @click="commit">确认</view>
		</view>
		
	</view>
</template>

<script>
	import NewCollection from '@/components/newCollection.vue'
	export default{
		data(){
			return{
				popData:{
					show:true,
					text:'已添加到收藏',
					url:'/pages/my/myCollection/collection'
				},
				openNewColl:false,
				collIndex:1,
				collData:[
					{
						name:'旅游',
						img:'/static/banner.png',
						num:'226',
						id:1
					},
					{
						name:'电商',
						img:'/static/banner.png',
						num:'35',
						id:2
					},
					{
						name:'其它',
						img:'/static/banner.png',
						num:'48',
						id:3
					},
				]
			}
		},
		methods: {
			newColl() {
				this.openNewColl = true
				// this.close()
				
			},
			closeNewColl(){
				this.openNewColl = false
			},
			close(){
				//#ifdef APP-PLUS|| MP-WEIXIN
				this.$parent.closeColl();
				//#endif
				//#ifndef APP-PLUS|| MP-WEIXIN
				this.$parent.$parent.closeColl();
				//#endif
			},
			chooseColl(id){
				this.collIndex = id;
				
				// console.log(id);
				
			},
			commit(){
				this.$store.commit('showAddCussUpdate',this.popData)
				this.close();
			}
		},
		created() {
			document.body.style.overflow = 'hidden'
		},
		components: {
			NewCollection
		},
	}
</script>

<style scoped>
	.Collection{
		width: 750upx;
		height: 100vh;
		position: fixed;
		z-index: 30;
		top:50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.mask{
		width: 750upx;
		height: 100vh;
		position: absolute;
		background: rgba(0,0,0,0.3);
	}
	.Collection-box{
		width: 700upx;
		height: 700upx;
		left: 25upx;
		right: 25upx;
		top: 357upx;
		background: #FFFFFF;
		border-radius: 20upx;
		position: absolute;
	}
	.Collection-head{
		width: 100%;
		height: 30upx;
		margin-top: 48upx;
	}
	.Collection-label{
		font-size: 28upx;
		margin-left: 37upx;
		float: left;
	}
	.new{
		font-size: 28upx;
		color: #666666;
		float: right;
		margin-right: 41upx;
	}
	
	.Collection-list{
		width: 100%;
		margin-top: 50upx;
		height: 430upx;
		overflow: hidden;
	}
	.Collection-item{
		width: 100%;
		height: 113upx;
		margin-bottom: 42upx;
	}
	.item-img{
		width: 145upx;
		height: 113upx;
		border-radius: 5upx;
		margin-left: 39upx;
		float: left;
	}
	.item-info{
		width: 300upx;
		height: 113upx;
		margin-left: 30upx;
		float: left;
	}
	.coll-name{
		width: 100%;
		display: block;
		height: 30upx;
		margin-top: 20upx;
		font-size: 28upx;
	}
	.coll-num{
		width: 100%;
		display: block;
		height: 30upx;
		margin-top: 20upx;
		font-size: 24upx;
		color: #999999;
	}
	.item-choose{
		width: 26upx;
		height: 26upx;
		margin-top: 40upx;
		float: right;
		margin-right: 43upx;
	}
	.commit{
		width: 623upx;
		margin-left: auto;
		margin-right: auto;
		height: 64upx;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		color: #FFFFFF;
		text-align: center;
		margin-top: 40upx;
		font-size: 28upx;
		line-height: 64upx;
		border-radius: 10upx;
	}
</style>
